<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>球员管理系统</title>
    <link rel="stylesheet" href="2.css">
</head>

<body>
<header>
    <div class="logo">球员管理系统</div>
    <nav>
        <ul>
            <li><a href="#">首页</a></li>
            <li class="dropdown">
                <a href="#">热门</a>
                <ul class="dropdown-menu">
                    <li><a href="#">热门球员</a></li>
                    <li><a href="#">热门教练</a></li>
                    <li><a href="#">热门赛事</a></li>
                </ul>
            </li>
            <li><a href="#">登录</a></li>
            <li><a href="3.html" target="_blank">注册</a></li>
        </ul>
    </nav>
</header>

<main>
    <section class="notice-news">
        <div class="notice">
            <h2>通知公告</h2>
            <width:200px>
                <ul>
                    <li><a href="https://baike.baidu.com/item/%E5%85%AC%E5%91%8A/9719995" target="_blank">通知1</a>
                    </li>
                    <li><a href="https://www.zhihu.com/question/617768388" target="_blank">通知2</a></li>
                </ul>
            </width:200px>
        </div>
        <div class="news">
            <h2>新闻资讯</h2>
            <ul>
                <li><a href="https://sinanews.sina.cn/native_page/quanzi_917672687568646145.html"
                       target="_blank">新闻1</a></li>
                <li><a href="https://slide.news.sina.com.cn/slide_1_2841_593973.html" target="_blank">新闻2</a></li>
            </ul>
        </div>
        <div class="recommended">
            <h2>推荐资讯</h2>
            <ul>
                <li><a href="https://news.qq.com/" target="_blank">推荐1</a></li>
                <li><a href="https://rebang.today/" target="_blank">推荐2</a></li>
            </ul>
        </div>
    </section>

    <section class="article-list">
        <article class="article active">
            <img src="wz1.jpg" alt="文章1图片">
            <h3>凝聚奋进力量，唱响青春之歌</h3>
            <p>青春不止有诗和远方，还有责任和担当，新时代的中国青年，生逢其时，重任在肩，唯有以青春之我，奋斗之我，争当追梦先锋，汇聚青春力量，才能在青春的赛道上奋勇奔跑，为中华民族伟大复兴贡献青春智慧。微光虽小，却可守万家灯火。愿吾辈青年皆如点点微光，照亮祖国万里山河！
            </p>
            <time datetime="2023-04-01">2023-04-01</time>
        </article>
        <article class="article">
            <img src="wz2.jpg" alt="文章2图片">
            <h3>扬青春之帆，踏时代之浪</h3>
            <p>青春奋进正当时，不负韶华争朝夕。新时代青年处在民族发展的最佳时期，更应勤奋学习、砥砺奋进，以真心交付人民，以才华报效国家。时代的未来属于青年，我们要在担当中历练，在尽责中成长，让青春在逐梦的奋斗中升华！
            </p>
            <time datetime="2023-04-02">2023-04-02</time>
        </article>
        <article class="article">
            <img src="wz4.jpg" alt="文章3图片">
            <h3>自信自强的精神力量</h3>
            <p>自信自强，淬炼于困难中凝聚的团结伟力。团结奋斗是我们党和国家能够解决一个又一个困难，取得一个又一个胜利的重要前提。中华民族之所以能一步步走来，并取得如今的伟大成就，正是全国各族人民在中国共产党的坚强领导下，团结一致、艰苦奋斗取得的。
            </p>
            <time datetime="2023-04-03">2023-04-03</time>
        </article>
        <div class="controls">
            <button class="control-btn" onclick="prevSlide()">上一张</button>
            <button class="control-btn" onclick="nextSlide()">下一张</button>
        </div>
    </section>
</main>

<!-- 返回顶部按钮 -->
<button class="back-to-top" onclick="scrollToTop()">回到顶部</button>

<footer>
    <p>版权 2023 佳辉传媒</p>
    <p>隐私政策 | 服务条款 | 联系方式</p>
</footer>

<script src="script.js"></script>
<script>// 返回顶部按钮显示与隐藏
var button = document.querySelector('.back-to-top');

window.addEventListener('scroll', function () {
    if (window.scrollY > 100) {
        button.style.display = 'block'; // 页面滚动超过100px时显示按钮
    } else {
        button.style.display = 'none'; // 否则隐藏按钮
    }
});


// 回到顶部按钮点击事件
function scrollToTop() {
    window.scrollTo({
        top: 0, // 滚动到页面顶部
        behavior: 'smooth' // 平滑滚动效果
    });
}
</script>
</body>

</html>
